<!-- eslint-disable -->
<template>
    <div class="container" :style="{minHeight : offsetheight + 'px'}">
        <img src="../../../assets/images/guohui.png" id="logo" style="display: none;"/>
        <!--        <template v-if="loading" style="text-align:center;">-->
        <!--            <van-row>-->
        <!--                <van-col span="24" style="margin-top:30%; text-align:center;">-->
        <!--                    <van-loading type="spinner" color="#ffffff" size="48px"-->
        <!--                                 text-size="24px" vertical>-->
        <!--                        查询中-->
        <!--                    </van-loading>-->
        <!--                </van-col>-->
        <!--            </van-row>-->
        <!--        </template>-->

        <!--        <template v-else>-->
        <div class="header">
            <img class="hd-img-responsive"
                 src="../../../assets/images/country_title.png"
            />
            <!--                <div class="title-tip">快递外卖人员专用出入</div>-->
            <!--                <div class="title-main">通&nbsp;&nbsp;行&nbsp;&nbsp;证</div>-->
        </div>
        <div class="body">
            <div class="main-name">
                {{name}}
            </div>
            <div class="img-item">
                <canvas id="qrCode" ref="qrCode"></canvas>
            </div>
            <div class="main-time">
                <van-button @click="scanQRCode" plain type="primary">扫一扫</van-button>
                <!--将于 2020-04-08 23:59:59 失效-->
            </div>
            <div class="footer" @click="aaa">
                依托国家一体化政务服务平台，实现跨省（区、市）数据共享和互通互认
            </div>
        </div>
<!--        <div class="footer-img">-->
<!--            <img class="hd-img-responsive"-->
<!--                 src="../../../assets/images/country_bottom.png"-->
<!--            />-->
<!--        </div>-->
        <!--        </template>-->

        <div class="dialog-item" v-if="dialogShow">
            <van-row>
                <van-col class="dialog-title" span="24">
                    提示
                </van-col>
                <van-col class="dialog-content" span="24">
                    <van-col span="24">
                        <van-icon name="info-o"/>
                    </van-col>
                    <van-col span="24">
                        通行证状态异常<br>
                        请重新扫描二维码
                    </van-col>
                </van-col>
            </van-row>
        </div>
        <van-popup v-model="healthInfoShow">
            <div class="subtitle">注：数据在不断汇聚和完善中，查询结果仅供参考。</div>
            <div class="title">基础信息</div>
<!--            healthInfo-->
            <van-field
                    input-align="right"
                    v-model="healthInfo.person.desensitizeName"
                    name="name"
                    label="真实姓名"
                    disabled
            />
            <van-field
                    input-align="right"
                    v-model="healthInfo.person.desensitizeCardId"
                    name="card_no"
                    label="身份证号"
                    disabled
            />
            <div class="title">确诊、疑似患者查询结果</div>
            <van-field
                    input-align="right"
                    v-model="healthInfo.yqWarn.warnType"
                    name="warnType"
                    label="是否为确诊或疑似患者？"/>
            <div class="title">同行密接查询结果</div>
            <van-field
                    input-align="right"
                    v-model="getmijie"
                    disabled
                    name="rjmj"
                    label="是否与确诊或疑似患者同行密切接触？"/>
            <div class="subtitle">同行密接数据为：截止当前日期的14天内，和确诊或疑似患者同乘火车、飞机前后三排（共七排）及同一客车或客船的相关人员。</div>
            <div class="title">已关联的地方健康码信息</div>
            <van-field
                    input-align="right"
                    v-model="healthInfo.healthyReport[0].dataSource"
                    name="dataSource"
                    label="数据来源"
                    disabled
            />
            <van-field
                    input-align="right"
                    v-model="getFengXian"
                    name="healthyStaus"
                    label="健康状态"
                    disabled
            />
            <van-field
                    input-align="right"
                    v-model="healthInfo.healthyReport[0].date"
                    label="健康报告日期"
                    disabled
            />
            <div v-if="healthInfo.yqReports.length>0">
                <div class="title">健康申报信息</div>
                <van-field
                        input-align="right"
                        v-model="healthInfo.yqReports[0].date"
                        label="健康打卡时间"
                        disabled
                />
                <van-field
                        input-align="right"
                        v-model="healthInfo.yqReports[0].city"
                        label="当前居住地址"
                        disabled
                />
                <!--            <van-field-->
                <!--                    v-model="healthInfo.yqReports[0].date"-->
                <!--                    name="date"-->
                <!--                    label="居住地风险等级"-->
                <!--                    disabled-->
                <!--            />-->
                <van-field
                        input-align="right"
                        v-model="isContactPatient"
                        name="date"
                        label="近14天内您是否接触新冠肺炎确诊或疑似患者"
                        disabled
                />
                <van-field
                        input-align="right"
                        v-model="symptom"
                        name="date"
                        label="当前健康状态"
                        disabled
                />
                <van-field
                        input-align="right"
                        v-model="healthInfo.yqReports[0].temperature"
                        name="date"
                        label="当前体温(℃)"
                        disabled
                />
                <van-field
                        input-align="right"
                        v-model="healthInfo.yqReports[0].phone"
                        name="date"
                        label="联系电话"
                        disabled
                />
                <div class="subtitle">注：个人填写的健康申报数据仅供参考，不作为出行异常提醒判定依据。</div>
            </div>

        </van-popup>
    </div>
</template>

<script>
import { getHealthInfofm, qrCodeGetUserInfo } from '@/api/yi-qing-fang-kong.js'
import { drawCertQrCode } from '@/libs/tools'
import QRcode from 'qrcodejs2'
// 组件
import wx from 'weixin-js-sdk'
// import { Dialog } from 'vant'
// import { passType } from '@/libs/dist'

export default {
  data () {
    return {
      healthInfoShow: false,
      loadingImg: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584267495000/loadingImg.jpg',
      user_img: '',
      dialogShow: false,
      name: '',
      imgStream: '',
      tel: '',
      worker_type: '暂无数据',
      work_type: '暂无数据',
      health_type: '健康',
      userinfo: {
        type: 1
      },
      offsetheight: document.documentElement.clientHeight,
      qrColor: ['', '#0DBB22', '#00A2E6', '#FFEF00', '#E9611D', '#A865CF', '#E30920'],
      fontColor: ['', '#FFFFFF', '#000000', '#FFFFFF', '#FFFFFF'],
      borderColor: ['', '#0DBB22', '#00A2E6', '#FFEF00', '#E9611D', '#A865CF', '#E30920'],
      loading: true,
      // 经度
      lng: '123.410782',
      // 纬度
      lat: '41.789928',
      symptom: '',
      healthInfo: {
        person: {
          desensitizeName: '',
          desensitizeCardId: ''
        },
        healthyReport: [
          { dataSource: '', healthyStaus: '', data: '' }
        ],
        rjmj: {
          bingli: '',
          from: ''
        },
        yqWarn: {
          warnType: '',
          fbrq: '',
          qzrq: '',
          jcrq: '',
          mdtrtDate: '',
          dscgDate: '',
          from: ''
        },
        yqReports: [
          {
            date: '',
            city: '',
            temperature: '',
            symptom: '',
            phone: '',
            isContactPatient: ''
          }
        ]
      }
    }
  },

  props: {},

  components: {},

  computed: {
    getColor () {
      return this.qrColor[this.userinfo.type]
    },
    isContactPatient () {
      if (this.healthInfo.yqReports[0].isContactPatient === '2') {
        return '否'
      } else {
        return '是'
      }
    },
    getmijie () {
      if (this.healthInfo.rjmj.bingli === '非密接人员') {
        return '否'
      } else {
        return '是'
      }
    },
    getFengXian () {
      if (this.healthInfo.healthyReport[0].healthyStaus == '10') {
        return '高风险'
      }
      if (this.healthInfo.healthyReport[0].healthyStaus == '01') {
        return '中风险'
      }
      return '低风险'
    }
  },

  methods: {
    aaa () {
      this.healthInfoShow = true
    },
    scanQRCode () {
      console.log('...')
      let _this = this
      this.$common.wxCallBack(function () {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            // alert(JSON.stringify(res))
            let result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
            // alert('扫描结果：' + result)
            qrCodeGetUserInfo({ qr_str: result, width: '105' }).then(ret => {
              console.log(ret.data, '返回的信息')
              if (ret.data.errcode === 0) {
                _this.healthInfo = ret.data.data.data
                console.log(_this.healthInfo)
                _this.healthInfoShow = true
                for (let i = 0; i < _this.healthInfo.yqReports[0].symptom.length; i++) {
                  if (_this.healthInfo.yqReports[0].symptom[i] === '1') {
                    _this.symptom += '没有出现症状；'
                  }
                  if (_this.healthInfo.yqReports[0].symptom[i] === '2') {
                    _this.symptom += '感冒样症状：乏力、咳嗽、发烧、肌肉疼、头疼；'
                  }
                  if (_this.healthInfo.yqReports[0].symptom[i] === '3') {
                    _this.symptom += '喘憋、呼吸急促；'
                  }
                  if (_this.healthInfo.yqReports[0].symptom[i] === '4') {
                    _this.symptom += '恶心呕吐、腹泻；'
                  }
                  if (_this.healthInfo.yqReports[0].symptom[i] === '5') {
                    _this.symptom += '心慌、胸闷；'
                  }
                  if (_this.healthInfo.yqReports[0].symptom[i] === '6') {
                    _this.symptom += '结膜炎（红眼病样症状：眼睛涩、红、分泌物）'
                  }
                }
                // alert(JSON.stringify(ret.data.data.data))
                // alert(JSON.stringify(ret))
              } else {
                // this.dialogShow = true
                _this.$notify({ type: 'danger', message: ret.data.errmsg })
              }
            })
            // window.location.href = result;//因为我这边是扫描后有个链接，然后跳转到该页面
          },
          error: function (res) {
            alert(res)
          }
        })
      })
    },
    bindQRCode (val) {
      console.log('二维码生成时候的随机码', this.randomNum)
      let qrcode = new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        // text: this.$common.xeUtils.locat().origin + '/#/epidemic-submit-success-public-new?randomNum=1', // 二维码内容
        text: strToInt8Array(val), // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log(qrcode)
    },
    getLocation () {
      const randomNum = this.$route.query && this.$route.query.randomNum
      console.log('位置-获取的随机码', randomNum)
      let isSuccess = false// 获取位置成功还是失败
      let _this = this
      if (!isSuccess) {
        this.$common.getLocation(function (option) {
          _this.lng = option.longitude
          _this.lat = option.latitude
          console.log(_this.lng, '获取后经度')
          console.log(_this.lat, '获取后纬度')
          // 存入信息
          const param = {
            qrcode: randomNum,
            longitude: _this.lng,
            latitude: _this.lat
          }
          _this.insertUserPermitPlace(param)
        })
        isSuccess = true
        console.log('默认经度', this.lng)
        console.log('默认纬度', this.lat)
      }
    },
    init () {
      getHealthInfofm().then(ret => {
        console.log(ret.data, '返回的信息')
        if (ret.data.errcode === 0) {
          this.loading = false
          this.name = ret.data.data.name
          let srt1 = JSON.parse(ret.data.data.result)
          let srt2 = JSON.parse(srt1.data)
          let srt3 = JSON.parse(srt2.data)
          let srt4 = JSON.parse(srt3.bizPackage)
          console.log(srt4, 'srt4')
          this.imgStream = ret.data.data
          if (this.imgStream) {
            drawCertQrCode({
              id: 'qrCode', // canvas 绘制层ID
              color: '#000003', // 二维码颜色
              logoID: '', // logo图片ID
              widthBlock: 4, // 白边为4个模块
              multi: 5, // 放大倍数 支持小数
              width: parseFloat(srt4.bizData.width), // 由请求响应包 width得到，非固定值
              codeContent: srt4.bizData.imgStream
            })
            // 上传到服务器（这里是上传到阿里云，this.oss是直接把阿里云的oss连接作为Vue对象的属性来调用,put是上传文件的方法）
            // this.oss.put('qrcode' + Math.random() * 10 + '.png', file).then(result => {
            //   this.qrcode = result.url // 将已上传的图片的url赋值给img的src
            // })
          }
          // this.userinfo = ret.data.data
          // this.tel = this.changeTel(ret.data.data.tel)
          // this.user_img = 'https://life-photo.oss-cn-beijing.aliyuncs.com/' + ret.data.data.card_no + '.jpg'
          // this.userinfo['age'] = getAgeByIdCard(this.userinfo.card_no)
        } else {
          // this.dialogShow = true
          this.$notify({ type: 'danger', message: ret.data.errmsg })
        }
      })
    },
    changeTel (data) {
      let tel = data.substr(0, 3) + '****' + data.substr(7)
      return tel
    },
    unique (arr) {
      return Array.from(new Set(arr))
    },
    // 生成二维码
    makeQRCode () {
      QRCode.toDataURL('http://aaa.vv.com/erp/card?authkey=' + this.companyId).then(imgData => {
        if (imgData) {
          let file = this.convertBase64UrlToBlob(imgData)
          // 上传到服务器（这里是上传到阿里云，this.oss是直接把阿里云的oss连接作为Vue对象的属性来调用,put是上传文件的方法）
          this.oss.put('qrcode' + Math.random() * 10 + '.png', file).then(result => {
            this.qrcode = result.url // 将已上传的图片的url赋值给img的src
            alert('生成成功')
          })
        }
      })
    },
    // 从 base64 转换成 file
    convertBase64UrlToBlob (urlData) {
      // let bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
      // 处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(urlData.length)
      let ia = new Uint8Array(ab)
      for (let i = 0; i < urlData.length; i++) {
        ia[i] = urlData.charCodeAt(i)
      }
      return new Blob([ab], { type: 'image/png' })
    }
  },
  watch: {},

  mounted () {
    this.init()

    // let str = '{"code":200,"data":"{\\"code\\":200,\\"data\\":\\"{\\\\\\"bizPackage\\\\\\":\\\\\\"{\\\\\\\\\\\\\\"resultCode\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\",\\\\\\\\\\\\\\"resultDesc\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"请求成功\\\\\\\\\\\\\\",\\\\\\\\\\\\\\"bizData\\\\\\\\\\\\\\":{\\\\\\\\\\\\\\"imgStream\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"/v10PkY4/wl3dOOKP4CCgHL4YkKOkQovCUYggLp8y4hrvq7otqXCey6Auva4cRURtu8fmCgkroC6NoT9u937YDX+mKmugIJ+OI6dCYiKdYofCSCA/qqqqqqqqqqqqqqqv4AAqK2N7OOKsgOOsK+AALd1tPqyF/qQnP9GPqWAEMklZxXKO+/vPoYie4DyA1RmFUMkis+MCPB0AGi/LgwzsR9C1emCtUsAGuBQJ3B2V/Rq0vcoTIDl21aDBt25mQKYvPgrAOOXb2GUmcs+lEYsGUWAYYYi05xCwf4UNsOLKgAWuG7t3fXkdu3PRnF5AJAkJVo+4lUqLwg2+MiAl9veXuw8mes3n4auUABcliotRGKCcGaK8M2lAF/jRX2oMUwRrYlgZO+A5DoTQ9McxXaEDZMwCID7r1OhN84+kMIxGvoggI14EHRVigWP+KuiieOAP+PV+Ajr+2HB/AQC+ADI4waKfjCPQ5iMMYyKACqtZa3PtqmGKKmtAq0AiOcsi0MNiScDiO20jgCfgvf5Hyr4xpv8Vnz/gJE/NqYz/ELv8jw8SDmAp2GWFg+kIXqc82c10gDVbn4yN3g6tOYod+fKAMO8iu39HePnQyBMamEAFchpEKOy3xeoUGSd7oAXW1vwYie3CsEUYYGugKBSKWqmwvcK/VOhmdgABpRq3wTOPIjxOdgwNAAMBSCfvveebslhlp9ZgNe7DBl3J+OMOHEVEueAIf7A2ZSBCofHgYXGPwCKil0ZeNPH1bCkTY0CgKEhQAq0XfvBmOrMgrQAyx7GDGqNoti+M0rQvYCctPfKQR229OtPMCjDACZI5nhJhyYU4je8l9mAxUtD/VZ4cwRopmZH4AB+op20jcYbvcIlKUZ6AH3YjpHIyFMM2QN28EOAX5tQ/lDC/nMM+75O+oBojN6IahKIXNuIihiIgDra4qpylazoQakukK4ASLApirAVjEnOjvNSiICftrP6DsX9Jaz5P478ABmd5EcgeIQUOM/Fu1MAZgo7F0eeIbucmOkM4ABIRsxptWtSOuVPaOIugMbS2afimtQFPIyu0sYAuHxFtKMjdu2VBbKOLgDvk0O/7HFFOuk8mdFOACzxhjc9fVniiNQQsPuAJ07NY1H2n1ouTD5gmIBUWjECnszDi5BFGzgegL+R9fABIHW74jGfq2cAYYnAAJCLZoNXpSYLeQCep+kzu0gF831OGOOKALGj/L7x6zXQyEOq/iGAHgWinv82u6i32+GWnoChyePmaOKY41nWuC5+AE+E5wsQCEvRAPDv4I4AbHH473lJNPclsnyyT4AWJ7dBLsNX8vmUGNMCAInKTaiLPQMsWU2GscMAn5Mb/DgZ/QkY+VgW+ADo56mPLO2Ir1GOlCSIAJr4BagtuqkEla+cGKmAyKUrj7EDjG1ZiOsDioDv9S79yzP/l6j/wQn/gGCKnaVaGu5gu2EeuOuAMh7PHaetgHFF1qGNHoA9Y0n6+CLqwcFuPuJEAILOUfWqenY7W2BDiscA3RSUXadydswYOgfk/4AusNLf58OkIumIJ9KCAOxmnlYwuD/+90UsuVOAhw1BifIRqID+wHYOdIBpwBXOw14DoScZBwi0AHJVilTUiGsMMeTQat+AtPdozzaHqHKX0Asv8IA76l6ieCpuFJrJjqtCAMFUQ17cfIG9SF6EyD+AL86OZHq0AGsNfyWBxoChFXjuUcjPdCKcPmpPgEcK3h7ChUGPcebqWfsAuRZfPpAl1Vdiqxoh94DjQgMbglosK8IKDMl+gC1IzcF1CE9AWMvK0VqAGhXd/HG+/49y/OY9+oAAyqWMwYKPC+2Of3SMAP7KzqkeZausA67Km6kAgtcNj3DUiaWPikVmj4C6FN//UG74iG/4HoD9gLqGuNTxDaN3E0F16rEAuvA6RSd3M8KeOM0MXgCCViVr0gnCPGPKzFjEAP6qx9TcrggJojQL9KkA\\\\\\\\\\\\\\",\\\\\\\\\\\\\\"width\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"105\\\\\\\\\\\\\\"}}\\\\\\",\\\\\\"sign\\\\\\":\\\\\\"XIZiKbLJ/idP6ov2zZNyO+KwbvWIXPcnQhOuQTixwNy0N1ep4QP16AG4fbJUA3+16kSeAn9avXZlQEFqVPEejdZxgpPqcfXLHG4X4nOZ+Z2BqFyXMmgPTSHzp4tuUf4+0+nslS+dOpPL/Y4tVgrdBtuTtf9xkigofQbhH1JIgHU=\\\\\\"}\\",\\"message\\":\\"\\"}","message":""}'
    // let srt1 = JSON.parse(str)
    // let srt2 = JSON.parse(srt1.data)
    // let srt3 = JSON.parse(srt2.data)
    // let srt4 = JSON.parse(srt3.bizPackage)
    // console.log(srt1)
    // console.log(srt2)
    // console.log(srt3)
    // console.log(srt4)
    //  drawCertQrCode({
    //    id: 'qrCode', // canvas 绘制层ID
    //    color: '#000003', // 二维码颜色
    //    logoID: 'logo', // logo图片ID
    //    widthBlock: 4, // 白边为4个模块
    //    multi: 5, // 放大倍数 支持小数
    //    width: 105, // 由请求响应包 width得到，非固定值
    //    codeContent: srt4.bizData.imgStream
    //  })
  }

}
</script>

<style scoped lang="less">
    .van-popup--center{
        width: 80%;
        height: 80%;
    }
    @borderColor: #00A2E6;
    .type1 {
        border: 1px solid #0dbb22;
    }

    .type2 {
        border: 1px solid #ffff00;
    }

    .type3 {
        border: 1px solid #e9611d;
    }

    .type4 {
        border: 1px solid #e30920;
    }

    .c1 {
        color: #0dbb22;
    }

    .c2 {
        color: #ffff00;
    }

    .c3 {
        color: #e9611d;
    }

    .c4 {
        color: #e30920;
    }

    .title {
        /*width: 100%;*/
        padding: 0.625rem 0.9375rem;
        background: #dddddd;
        font-size: 12px;
        color: #333333;
        font-weight: bold;
    }
    /*.title {
        color: #363636;
        font-weight: bold;
    }*/

    .value {
        color: #787878;
    }

    .main-tip {
        position: absolute;
        top: 70%;
        left: 2%;
        right: 2%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }

    .table-info {
        padding: 0px 4px 0 4px;
        border: 1px solid;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .user-info {
        padding: 5px 10px 10px 10px;

        .name {
            color: #363636;
            font-weight: bold;
        }

        .address {
            font-size: 14px;
        }
    }

    .imgStyle {
        width: 100%;
        border: 1px solid @borderColor;
    }

    /*新版样式部分*/
    .container {
        background-image: url("../../../assets/images/country_bg.jpg");
        background-size: 100% 100%;
        color: #ffffff;
    }

    .footer {
        /*position: absolute;*/
        /*bottom: 12%;*/
        text-align: center;
        font-size: 12px;
        /*padding: 0 20%;*/
        color: #fedba5;
        margin-top: 20%;
    }

    .footer-img {
        position: absolute;
        bottom: 0;
        text-align: center;
        font-size: 14px;
        padding: 0 40%;
    }

    .header {
        padding: 15% 10% 0 10%;
        text-align: center;
    }

    .title-tip {
        color: #f2f5f9;
        font-size: 20px;
        font-weight: bold;
    }

    .title-main {
        color: #ffffff;
        font-size: 48px;
        font-weight: bold;
        text-align: center;
    }

    .body {
        margin-top: 5%;
        font-size: 12px;
        text-align: center;
        padding: 0 18%;
        /*position: relative;*/
    }

    .img-item {
        width: 100%;
        margin: auto;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .img-item img {
        margin: auto;
        text-align: center;
    }

    .img-item #qrCode {
        border: 10px solid #fedba5;
        padding: 10px;
    }

    .userInfo {
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px 0;
    }

    .userInfo .van-row {
        padding: 0 10px;
        text-align: left;
    }

    .userInfo .van-col {
        margin-bottom: 5px;
    }

    .tel-item {
        letter-spacing: 2px;
        font-size: 14px;
    }

    .bottom-item {
        position: absolute;
        bottom: 40px;
    }

    .bottom-item .van-col--24 {
        height: 20px;
        line-height: 20px;
    }

    .bottom-right {
        height: 40px;
        line-height: 40px;
    }

    .dialog-item {
        position: fixed;
        top: 25%;
        bottom: 35%;
        /*left: 20%;*/
        /*right: 20%;*/
        width: 100%;
        border-radius: 5px;
        /*padding: 0 20%;*/
    }

    .dialog-item .van-row {
        height: 100%;
        padding: 0 15%;
    }

    .dialog-title {
        width: 100%;
        background-color: #33b384;
        font-size: 14px;
        padding: 15px;
        text-align: center;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    .dialog-content {
        background: #ffffff;
        height: 100%;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        color: orangered;
        text-align: center;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .van-icon-info-o {
        font-size: 50px;
    }

    .van-loading__text {
        color: #ffffff;
    }

    .main-name {
        margin-bottom: 5%;
        text-align: center;
        font-size: 22px;
        color: #fedba5;
    }

    .main-time {
        margin-top: 5%;
        text-align: center;
        font-size: 12px;
    }

    #qrCode {
        width: 200px;
        height: 200px;
    }
    .van-button{
        line-height: 30px;
        height: 30px;
        border: 1px solid #fedba5;
        color: #fedba5;
        background-color: inherit;
    }
    .subtitle{
        padding: 5px 0.9375rem;
        font-size: 12px;
        color: #e2e2e2;
    }
</style>
